<template>
    <div id="tmp1">
        <div id="desc">
            <div class="title">
                <h4>{{photoinfo.title}}</h4>
                <p>{{photoinfo.add_time | datefmt('YYYY:MM:DD HH:mm:ss')}} {{photoinfo.click}}次阅读</p>
                <p class="line"></p>
            </div>
            <div class="mui-content">
                <ul class="mui-table-view mui-grid-view mui-grid-9">
                    <li v-for="(item,index) in list" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                        <img :src="item.src" alt="" height="100" class="preview-img" @click="$preview.open(index, list)">
                    </li>
                </ul>
            </div>
            <p v-html="photoinfo.content"></p>
            <comment :id="id"></comment>
        </div>
    </div>
</template>
<script>
    import common from '../../kits/common.js';
    import { Toast } from 'mint-ui';
    import comment from '../subcom/comment.vue';
    export default{
        data(){
          return{
              id:0,
              photoinfo :{
//					"id": 52,
//					"title": "柳岩出席设计师好友兰玉的高级成衣发布Show",
//					"click": 0,
//					"add_time": "2015-04-18T06:27:06.000Z",
//					"content": "北京四季酒店,柳岩出席设计师好友兰玉的高级成衣发布Show,她身穿兰玉设计的纯白卡肩礼服惊艳登场,优雅晚装发髻搭配翡翠镶钻珠宝,举手投足尽显大气温婉,而卡肩低胸的礼服设计更是衬托出柳岩傲人的事业线资本,性感指数爆灯,入场即引来现场阵阵骚动,柳岩轻松看秀全程甜笑连连,心情靓绝。"
              },  //图片的详情描述数据对象/api/getimageInfo/:imgid
              list:[
                  {
						src: 'https://placekitten.com/600/400',
						w: 600,
						h: 400
					}, {
						src: 'https://placekitten.com/1200/900',
						w: 1200,
						h: 900
					}
              ]
          }//http://182.254.146.100:8899/api/getthumimages/:imgid

                },

        created(){
            this.id=this.$route.params.id;
            this.getinfo();

        },
        methods:{
            getinfo(){
                var url=common.apidomain+'/api/getimageInfo/'+this.id;
                this.$http.get(url).then(function(res){
                    if(res.body.status!=0){
                        Toast(res.body.message);
                        return;
                    }
                    this.photoinfo=res.body.message[0];
                })
            }
        },
        components:{
            comment
        }

    }
</script>
<style scoped>
    #desc{
        padding: 10px;
    }
    #desc  .title h4{
        color: #0094ff;
    }

    #desc .title p{
        color:rgba(0,0,0,0.4);
        margin-top: 10px;
    }
    #desc .title .line{
        width: 100%;
        height: 1px;
        border-bottom: 1px solid rgba(0,0,0,0.4);
    }
    .mui-content img{
        width: 100px;
        height: 100px;
    }
</style>